<template>
    <el-dialog :modal-append-to-body="true" :visible.sync="isShow" width="44%">
        <div class="container">
            <img :src="bigImg" alt="" class="bigImg">
            <img :src="smallImg" alt="" class="smallImg">
        </div>
    </el-dialog>
</template>

<script>


import { } from "@/requset/api"
export default {
    data() {
        return {
            isShow: false,
            bigImg: null,
            smallImg: null,
        }
    },
    methods: {
        doOpen(bigImg, smallImg) {
            this.isImageValid(bigImg).then(res => {
                if (res) {
                    this.bigImg = bigImg
                    this.smallImg = smallImg

                } else {
                    this.bigImg = smallImg
                    this.smallImg = null
                }
                this.isShow = true
            })
        },
        isImageValid(src) {
            return new Promise(function (resolve, reject) {
                var img = new Image();
                img.onload = function () {
                    resolve(true);
                }
                img.onerror = function () {
                    resolve(false);
                }
                img.src = src;
            });
        },
    },
}
</script>

<style lang="less" scoped>
.container {
    position: relative;

    .bigImg {
        width: 100%;
    }

    .smallImg {
        position: absolute;
        width: 18%;
        right: 0;
        top: 0;
        opacity: .5;
    }
}
</style>
